<template>
  <div>
    <PerfectTableComponent
      :loadTableList="loadTableList"
      :changePageSize="changePageSize"
      :changePage="changePage"
      :removeQueryField="removeQueryField"
      :clearQuery="clearQuery"
      v-model:query="query"
      title="日志类型"
      ref="tableRef"
      :queryFormHeaders="queryFormHeaders"
      :table="table"
      :tableColumns="tableColumns"
      :baseUrl="urls.API_URL_BACKSTAGE_DAILYTYPE_MANAGE"
      :formHeader="formHeader"
      v-model:form="form"
      @beforeAddRow="beforeAddRow"
    ></PerfectTableComponent>
  </div>
</template>

<script setup lang="ts">
import PerfectTableComponent from '@/components/base/table/PerfectTableComponent.vue';
import useTableList from '@/api/hooks/useTableList';
import urls from '@/api/request/urls';
import { provide, ref } from 'vue';
import type { FormHeader, TableColumn } from '@/types/interface/base_interface';
import { yesOrNoDict } from '@/api/dict';
import type { DailyType } from '@/types/interface/sys_interface';
// 表格工具必备参数
const { table, query, loadTableList, removeQueryField, clearQuery, changePageSize, changePage } = useTableList(
  urls.API_URL_BACKSTAGE_DAILYTYPE_MANAGE
);
// 将表格刷新函数传到子容器
provide('loadTableList', loadTableList);

//查询==========================================================
const queryFormHeaders = ref<FormHeader[]>([
  // 查询表单
  {
    prop: 'name',
    label: '名称'
  },
  {
    prop: 'display',
    label: '前台显示',
    type: 'select',
    list: yesOrNoDict
  }
]);

//表格==========================================================
// 表格插件ref对象
const tableRef = ref();

//表格列
// 定义表格所有的列字段信息
const tableColumns = ref<TableColumn[]>([
  {
    label: '名称',
    prop: 'name',
    fixed: true
  },
  {
    label: '排序',
    prop: 'sort'
  },
  {
    label: '前台显示',
    prop: 'display',
    width: 100,
    type: 'dict',
    dict: yesOrNoDict
  },
  {
    label: '日志数量',
    prop: 'dailyNumber'
  },
  {
    label: '创建时间',
    prop: 'createTime',
    width: 180
  },
  {
    label: '最后编辑时间',
    prop: 'updateTime',
    width: 180
  }
]);
//表单==========================================================
//表单对象
const form = ref<DailyType>({});
//表单元素类型
const formHeader = ref<FormHeader[]>([
  {
    label: '名称',
    prop: 'name',
    rules: [
      {
        required: true,
        message: '不能为空',
        trigger: 'blur'
      }
    ]
  },
  {
    label: '排序',
    prop: 'sort',
    type: 'number',
    rules: [
      {
        required: true,
        message: '不能为空',
        trigger: 'blur'
      },
      { type: 'number', message: '请输入数字类型' }
    ]
  },
  {
    label: '是否前台显示',
    prop: 'display',
    type: 'switch'
  }
]);
//在添加行的动作以前
const beforeAddRow = async () => {
  //传入初始值
  form.value = {
    sort: 0,
    display: true
  };
};
</script>

<style scoped></style>
